<!-- 设备管理-设备运行-操作计划确认弹窗页面 -->
<template>
  <px-dialog v-model="submitDialogVisible" class="view-equip-detail" title="操作计划确认" width="1280px" @open="openDialog" @close="closeDialog">
    <div class="view-equip-wrap">
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">设备编号</div>
          <div class="text">{{ formValue.eqpId || "-" }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备名称</div>
          <div class="text">{{ formValue.eqpName || "-" }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">状态类型</div>
          <div class="text">{{ formValue.downTypeName || "-" }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">状态原因</div>
          <div class="text">{{ formValue.downCauseName || "-" }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">计划开始时间</div>
          <div class="text">{{ formValue.startPlanTime || "-" }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">创建人</div>
          <div class="text">{{ formValue.createName || "-" }}</div>
        </div>
      </div>
    </div>
    <px-form ref="formRef" :inline="true" :model="formValue" :rules="rules" label-position="right" label-width="120px">
      <px-row :gutter="16">
        <px-col :span="12">
          <px-form-item label="实际开始时间" prop="startTime">
            <px-date-picker
              v-model="formValue.startTime"
              style="width: 100%"
              placeholder="请选择实际开始时间"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              clearable
              @change="changeStartTime"
            />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="实际结束时间" prop="endTime">
            <px-date-picker
              v-model="formValue.endTime"
              style="width: 100%"
              placeholder="请选择实际结束时间"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              clearable
              @change="changeEndTime"
            />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="状态时长" prop="runTimes">
            <px-input v-model="formValue.runTimes" placeholder="根据开始时间和结束时间计算" disabled />
          </px-form-item>
        </px-col>
      </px-row>
    </px-form>
    <div class="equip-dialog-footer" style="text-align: right">
      <px-button type="primary" @click="closeDialog">取消</px-button>
      <px-button type="primary" @click="handleSubmit(formRef, 1)">确认</px-button>
      <px-button type="primary" @click="handleSubmit(formRef, 2)">确认并生成运行记录</px-button>
    </div>
  </px-dialog>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { formatDuration } from "@/utils/pengxi";
import { PxMessage } from "px-ui";
import dayjs from "dayjs";
import { submitPlanAck } from "@/api/equip/runManage";
import { useRouter } from "vue-router";

const router = useRouter();
// 父级传过来的值
const emits = defineEmits(["closeDialog"]);
const props = defineProps(["submitDialogVisible", "rowData"]);
const submitDialogVisible = computed(() => props.submitDialogVisible);
const formRef = ref();
const rules = computed(() => ({
  startTime: [{ required: true, message: "请选择开始时间", trigger: ["blur", "change"] }],
  endTime: [{ required: true, message: "请选择结束时间", trigger: ["blur", "change"] }]
}));
const formValue = ref({
  eqpId: "",
  eqpName: "",
  downTypeName: "",
  downCauseName: "",
  startPlanTime: "",
  createName: "",
  startTime: "",
  endTime: "",
  runTimes: ""
});

// 打开弹窗
const openDialog = async () => {
  formValue.value = JSON.parse(JSON.stringify(props.rowData));
  formValue.value.startPlanTime = formValue.value.startTime;
  formValue.value.endTime = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
  if (formValue.value.startTime && formValue.value.endTime) {
    const timeRange =
      Date.parse(new Date(formValue.value.endTime.replace(/-/g, "/"))) - Date.parse(new Date(formValue.value.startTime.replace(/-/g, "/")));
    formValue.value.runTimes = timeRange === 0 ? 0 : timeRange ? formatDuration(timeRange) : "-";
  } else {
    formValue.value.runTimes = "-";
  }
};
// 关闭弹窗
const closeDialog = () => {
  formRef.value?.resetFields();
  formValue.value = {};
  emits("closeDialog");
};
// 确认
const handleSubmit = async (formEl: any, type: number) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      if (formValue.value.endTime <= formValue.value.startTime) {
        PxMessage.warning("实际开始时间不能晚于或等于实际结束时间！");
        return;
      }
      const params = {
        id: formValue.value.id,
        startTime: formValue.value.startTime,
        endTime: formValue.value.endTime
      };
      if (type === 1) {
        await submitPlanAck(params);
        PxMessage.success("确认成功");
        closeDialog();
      } else if (type === 2) {
        await submitPlanAck(params);
        router.push(`/all/equip/runManage/record?planId=${formValue.value?.id}`);
      }
    }
  });
};
// 开始时间
const changeStartTime = () => {
  if (formValue.value.startTime && formValue.value.endTime) {
    if (formValue.value.startTime > formValue.value.endTime) {
      formValue.value.endTime = "";
    }
    // 计算运行时长
    const timeRange =
      Date.parse(new Date(formValue.value.endTime.replace(/-/g, "/"))) - Date.parse(new Date(formValue.value.startTime.replace(/-/g, "/")));
    formValue.value.runTimes = timeRange === 0 ? 0 : timeRange ? formatDuration(timeRange) : "-";
  } else {
    formValue.value.runTimes = "-";
  }
};
// 结束时间
const changeEndTime = () => {
  if (formValue.value.startTime && formValue.value.endTime) {
    if (formValue.value.startTime > formValue.value.endTime) {
      formValue.value.startTime = "";
    }
    // 计算运行时长
    const timeRange =
      Date.parse(new Date(formValue.value.endTime.replace(/-/g, "/"))) - Date.parse(new Date(formValue.value.startTime.replace(/-/g, "/")));
    formValue.value.runTimes = timeRange === 0 ? 0 : timeRange ? formatDuration(timeRange) : "-";
  } else {
    formValue.value.runTimes = "-";
  }
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");

.view-equip-detail .view-equip-wrap .view-equip-content .view-equip-item {
  width: 50%;
  .label {
    background: #e7eefb;
  }
}
:deep(.px-form-item) {
  width: 100%;
}
</style>
